vue中实时监听input值的变化，停止输入n秒后去请求，而不是时时请求数据

您所在的位置：网站首页 › input 值变化后触发 › vue中实时监听input值的变化，停止输入n秒后去请求，而不是时时请求数据

vue中实时监听input值的变化，停止输入n秒后去请求，而不是时时请求数据

2023-12-09 02:39| 来源: 网络整理| 查看: 265

在做搜索功能的时候，我们不希望input框中值一改变，就马上去请求数据，而是在指定间隔内没有输入时，才会执行函数。在指定时间间隔里输入，会清除定时器，重新计时。这就是函数防抖。

因为我们可能在input框中的值还没有输完，这个时候，增加一个字符，就发送一次请求，这样太消耗程序，可能出现卡顿的情况。

因此，实时监听input值的变化，输入一个字符，200ms后再去获取input中的输入值。

例如，在input框中连续输入aaaaa，如果实时监听，值就是a, aa, aaa, aaaa, aaaaa，发送的就是五次请求。如果200ms后获取值，可能就是aaaaa。这样就只能发送一次请求。

import { debounce } from 'common/js/util' export default { props: { placeholder: { type: String, default: '搜索歌曲、歌手' } }, data() { return { query: '' } }, created() { this.$watch('query', debounce((newQuery) => { this.$emit('query', newQuery) }, 200)) } }

util.js:

export function debounce(func, delay) { let timer return function (...args) { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { func.apply(this, args) }, delay) } }

【本文地址】

vue中实时监听input值的变化，停止输入n秒后去请求，而不是时时请求数据

vue中实时监听input值的变化，停止输入n秒后去请求，而不是时时请求数据

今日新闻

推荐新闻